import { useState } from 'react';
import { PageContainer, ProForm, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
import ImgCrop from 'antd-img-crop';
import { useModel } from '@umijs/max';
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
import { Card, Upload, message, Row, Col, Space } from 'antd';
import styles from './index.less';
type Props = {};
const Index: React.FC<Props> = () => {
  const { initialState } = useModel('@@initialState');
  const [fileList, setFileList] = useState<UploadFile[]>([
    {
      uid: '-1',
      name: 'image.png',
      status: 'done',
      url: initialState?.currentUser?.headPortrait || '',
    },
  ]);
  const imgUploadHandler: UploadProps['onChange'] = ({ fileList: newFileList }) => {
    setFileList(newFileList);
  };

  const onPreview = async (file: UploadFile) => {
    let src = file.url as string;
    if (!src) {
      src = await new Promise((resolve) => {
        const reader = new FileReader();
        reader.readAsDataURL(file.originFileObj as RcFile);
        reader.onload = () => resolve(reader.result as string);
      });
    }
    const image = new Image();
    image.src = src;
    const imgWindow = window.open(src);
    imgWindow?.document.write(image.outerHTML);
  };

  const beforeUpload = (file: RcFile) => {
    const isLt2M = file.size / 1024 / 1024 < 5;
    if (!isLt2M) {
      message.error('图片最大为5MB!');
    }
    return isLt2M;
  };

  const formItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 14 },
  };

  return (
    <div>
      <PageContainer title="个人资料">
        <Card>
          <div className={styles.personageInfoWrapper}>
            <ProForm
              {...formItemLayout}
              initialValues={initialState?.currentUser}
              onFinish={async (values) => console.log(values)}
              layout="horizontal"
              submitter={{
                searchConfig: { submitText: '保存修改' },
                resetButtonProps: { style: { display: 'none' } },
                render: (_, doms) => {
                  return (
                    <Row>
                      <Col span={14} offset={4}>
                        <Space>{doms}</Space>
                      </Col>
                    </Row>
                  );
                },
              }}
            >
              <ProForm.Group>
                <ProFormText
                  width="xl"
                  fieldProps={{ maxLength: 20, showCount: true }}
                  name="username"
                  label="用户名"
                  placeholder="请输入名称"
                  rules={[{ max: 20, message: '最长为20字符' }]}
                />
              </ProForm.Group>
              <ProForm.Group>
                <ProFormText
                  rules={[{ max: 20, message: '最长为20字符' }]}
                  fieldProps={{ maxLength: 20, showCount: true }}
                  width="xl"
                  name="position"
                  label="职位"
                  placeholder="请输入你的职位"
                />
              </ProForm.Group>
              <ProForm.Group>
                <ProFormText
                  rules={[{ max: 20, message: '最长为20字符' }]}
                  fieldProps={{ maxLength: 20, showCount: true }}
                  width="xl"
                  name="company"
                  label="公司"
                  placeholder="请填写你的公司"
                />
              </ProForm.Group>
              <ProForm.Group>
                <ProFormText
                  rules={[{ max: 20, message: '最长为20字符' }]}
                  fieldProps={{ maxLength: 20, showCount: true }}
                  width="xl"
                  name="company"
                  label="个人主页"
                  placeholder="请填写你的公司"
                />
              </ProForm.Group>
              <ProForm.Group>
                <ProFormTextArea
                  rules={[{ max: 100, message: '最长为100字符' }]}
                  fieldProps={{ maxLength: 100, showCount: true }}
                  width="xl"
                  label="个人介绍"
                  name="remark"
                />
              </ProForm.Group>
            </ProForm>
            <div className={styles.headPortrait}>
              <ImgCrop rotate shape="round">
                <Upload
                  beforeUpload={beforeUpload}
                  accept="image/png, image/jpeg,image/jpg"
                  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                  listType="picture-card"
                  fileList={fileList}
                  maxCount={1}
                  onChange={imgUploadHandler}
                  onPreview={onPreview}
                >
                  {fileList.length === 0 ? '上传图片' : null}
                </Upload>
              </ImgCrop>
              <div className={styles.imgRule}>支持 jpg、png、jpeg 格式大小 5M 以内的图片</div>
            </div>
          </div>
        </Card>
      </PageContainer>
    </div>
  );
};
export default Index;
